<template>
  <div class="main">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
    > 
    <div class="item" v-for="item in list" :key="item.filmId">
      <van-card class="filmCard">
        <template #thumb>
          <img :src="item.poster" :alt="item.name" />
        </template>
        <template #title>
          <div class="item-title">{{ item.name }}
            <span class="itemname">{{item.item.name}}</span>
          </div>
        </template>
        <template #desc>
          <div class="desc">
            <div class="item-desc">
                观众评分 <span class="item-grade-num">{{item.grade}}</span>
            </div>
            <div class="item-grade">
                主演 <span>{{item.actors | parseActor}}</span>
            </div>
            <div class="item-intro">
                <span>{{item.nation}} | {{ item.runtime }}分钟</span>
            </div>
          </div>
        </template>
      </van-card>
      <div class="butBtn">
         <van-tag plain type="danger" size="large" color="#ff5f16">购票</van-tag>
      </div>
    </div>
    </van-list>
  </div>
</template>

<script>
import url from "@/config/url";
import Vue from "vue";
import { Card , Tag , List} from "vant";

Vue.use(Card);
Vue.use(Tag);
Vue.use(List)

export default {
  data() {
    return {
      // 页数
      page: 1,
      // 获取列表
      list: [],
      // 总数
      total: 0,
      // 当前是否处于加载中
      loading: false,
      // 所有的数据是否已经请求完毕
      finished: false,
    };
  },
  // created() {
  //   this.loadData();
  // },
  methods: {
    // 获取数据
    loadData() {
      this.$http
        .get(url.nowPlaying, {
          params: {
            pageNum: this.page,
          },
        })
        .then((res) => {
            // console.log(res.data);
          (this.list = [...this.list,...res.data.data.films]), //列表数据
          (this.total = res.data.data.total); //总数

            if(Math.ceil(this.total / 10 > this.page)){
              // 还有数据可以请求
              this.page =this.page +1
            }else{
              // 没有数据可以被请求
              this.finished =true
            }
            
            // 本次请求完毕
            this.loading = false
        });
    },
  },
  filters:{
      parseActor(actors){
          if(actors){
              var str = ''
              actors.forEach(el =>{
                  str += el.name + ' '
              })
              // 溢出隐藏
              return str.length > 15 ? str.slice(0, 15) + "..." : str
          }else{
              return "暂无主演"
          }
      }
  }
}
</script>

<style scoped>
.main {
  margin-top: 15px;
  margin-bottom:70px;
  /* background-color: #404041; */
}
.item{
  display: flex;
  border-bottom: .0133rem solid #eee;
  background-color: #fafafa;
}
.filmCard{
  width: 85%;
}
.van-card{
   
    padding: 30px 16px;
    font-size: 15px;

}
.van-card__thumb{
    width: 66px;
}
.van-card__thumb img{
    width: 66px;
    height: 99px;
    border-radius: 0px;
}
.desc{
    font-size: 13px;
    color: #797d82;
}
.desc >div{
    margin-top: 6px;
}
.item-grade-num{
    color:#ffb232;
}
.butBtn{
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.itemname{
  padding: 2px 2px; 
  background-color: #d2d6dc;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
</style>